<template>
  <div class="my-container">
    <div class="input-area">
      <el-upload
        class="avatar-uploader input-item"
        action="http://114.132.200.186:8080/uploadAvatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="newsForm.cover" :src="newsForm.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon " />
      </el-upload>
      <div class="input-item">
        <span>标题: </span><el-input v-model="newsForm.title" style="width: 600px" />
      </div>
      <div class="quill-wrap input-item">
        <quill-editor ref="myQuillEditor" v-model="newsForm.content" :options="editorOption" />
      </div>
      <el-button @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.snow.css'
// import { quillEditor, Quill } from 'vue-quill-editor'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import { addNews } from '@/api/news'

Quill.register('modules/ImageExtend', ImageExtend)
export default {
  name: 'AddNews',
  components: {
    quillEditor
  },
  data() {
    return {
      newsForm: {
        cover: '',
        creator: {
          empId: ''
        },
        title: '',
        content: ''
      },
      editorOption: { // 富文本框参数设置
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            action: 'http://127.0.0.1:7001/yun/upload',
            response: (res) => {
              return `http://127.0.0.1:7001/public/uploadfile/${res.data.filename}`
            }
          },
          // toolbar: {
          //   container: [],
          //   handlers: {
          //     'image': function() {
          //       QuillWatch.emit(this.quill.id)
          //     }
          //   }
          // }
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            // ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }], // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
            [{ 'direction': 'rtl' }], // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']
          ]
        }
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.newsForm.cover = res.content
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleSubmit() {
      this.newsForm.creator.empId = this.$route.params.id
      addNews(this.newsForm).then(response => {
        this.$alert('点击确定返回首页', '添加成功', {
          confirmButtonText: '确定',
          callback: action => {
            window.history.go(-1)
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.input-item {
  margin-bottom: 20px;
}

.quill-wrap >>> .ql-editor{
  height: 200px !important;
}
.my-container {
  /*width: 700px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.input-area {
  width: 700px;
}
</style>
